<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title">{{ 'child_bridge.reset_accessories' | translate }}</h5>
    <button
      type="button"
      class="btn-close"
      data-bs-dismiss="modal"
      [attr.aria-label]="'form.button_close' | translate"
      (click)="dismissModal()"
      [disabled]="clicked"
    ></button>
  </div>
  <div class="modal-body">
    @if (pairings.length === 0) {
    <div class="text-center mb-3">
      <i class="fas fa-circle-check primary-text" style="font-size: 75px"></i>
    </div>
    <p class="mb-0 text-center">{{ 'reset.bridge_accessories.empty' | translate }}</p>
    } @if (pairings.length > 0) {
    <div class="text-center mb-3"><i class="fas fa-broom primary-text" style="font-size: 75px"></i></div>
    <ul class="mb-3">
      <li>{{ 'reset.bridge_accessories.list_1' | translate }}</li>
      <li>{{ 'reset.clear_cache_single.list_3' | translate }}</li>
    </ul>
    <ul class="list-group list-group-box mb-0">
      @for (item of pairings; track item) {
      <li class="list-group-item d-flex justify-content-between align-items-center">
        <span class="me-3">
          <i class="fas fa-lg fa-hap"></i>
        </span>
        <span class="flex-grow-1">
          {{ item.name }}
          <br />
          <small class="grey-text">
            <i
              class="fas fa-link"
              [ngClass]="{
                'green-text': item._isPaired,
                'grey-text': !item._isPaired
              }"
            ></i>
            &middot;
            <span class="font-monospace">{{ item._username }}</span>
          </small>
        </span>
        <button
          class="btn btn-danger m-0 ms-3"
          (click)="toggleList(item._id)"
          [disabled]="clicked"
          [ngClass]="{ 'btn-danger': !toDelete.includes(item._id), 'btn-elegant': toDelete.includes(item._id) }"
          [attr.aria-label]="'form.button_delete' | translate"
        >
          <i
            class="fas"
            [ngClass]="{
              'fa-broom': !toDelete.includes(item._id),
              'fa-undo': toDelete.includes(item._id) && !clicked,
              'fa-spinner fa-pulse': toDelete.includes(item._id) && clicked
            }"
          ></i>
        </button>
      </li>
      }
    </ul>
    }
  </div>
  <div class="modal-footer justify-content-between">
    <div class="text-start">
      @if (pairings.length > 0) {
      <button
        type="button"
        class="btn btn-elegant"
        data-bs-dismiss="modal"
        (click)="dismissModal()"
        [disabled]="clicked"
      >
        {{ 'form.button_close' | translate }}
      </button>
      }
    </div>
    <div class="text-center">
      @if (pairings.length === 0) {
      <button type="button" class="btn btn-elegant" data-bs-dismiss="modal" (click)="dismissModal()">
        {{ 'form.button_close' | translate }}
      </button>
      }
    </div>
    <div class="text-end">
      @if (pairings.length > 0) {
      <button
        type="button"
        class="btn btn-danger"
        data-bs-dismiss="modal"
        [disabled]="!toDelete.length || clicked"
        (click)="cleanBridges()"
      >
        @if (!clicked) { {{ 'form.button_reset' | translate }} @if (toDelete.length > 0) { ({{ toDelete.length }}) }}
        @if (clicked) {
        <i class="fas fa-spinner fa-pulse"></i>
        }
      </button>
      }
    </div>
  </div>
</div>
